import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Divider } from 'antd-mobile'
import Header from '@/components/home/header'
import Loading from '@/components/home/loading/saleLoading'
import ChangeRule from '@/components/changeCourse/changeRule'
import CourseTypeItem from '@/components/changeCourse/courseType'
import EmptyChange from '@/components/changeCourse/empty'
import { getQueryVariable } from '@/utils/http'
import { getchangecoursetype } from '@/api/changeCourse'
import { ChangeCourseTypeData, adjustKeys, typeItem } from '@/types/changeCourse'

const changeCourseType: FC<{}> = () => {
  const navigate = useNavigate()
  const stuCouId = getQueryVariable('stuCouId')
  if (!stuCouId) {
    navigate('/404')
    return <></>
  }
  const [loading, setLoading] = useState(false)
  const [errorStatus, setErrorStatus] = useState(false)
  const [couresTypeData, setCourseTypeData] = useState<ChangeCourseTypeData>()
  const [adjustKeysName, setAdjustKeysName] = useState<string[]>([])
  useEffect(() => {
    setLoading(true)
    getchangecoursetype({ stuCouId: stuCouId }).then((res) => {
      setLoading(false)
      if (res.stat == 1) {
        setErrorStatus(false)
        if (res.data instanceof Array) {
          setErrorStatus(true)
        } else {
          setCourseTypeData(res.data)
          const keys = Object.keys(res.data.course).filter((val) => {
            return (
              Object.prototype.toString.call(
                res.data.course[val as keyof typeof res.data.course],
              ) === '[object Object]'
            )
          })
          setAdjustKeysName(keys)
        }
      }
    })
  }, [])
  return (
    <div className="w-full h-full min-h-screen bg-gray-F7F7F8 overflow-auto font-normal font-regular">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'选择调课场景'}
        headerColor="bg-white"
        notHeaderColor={false}
      ></Header>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      <ChangeRule />
      {couresTypeData?.courseId && (
        <>
          <div className="mt-r2.4 text-gray-333333 px-r1.2">
            <h3 className="text-r1.3 flex leading-r1.3 font-medium-family pl-r0.4 mb-0">
              <p className="m-0">{couresTypeData.plan.head}</p>
            </h3>
            <div className="mt-r1.2 rounded-r0.8 overflow-hidden shadow-bs5">
              <CourseTypeItem
                item={couresTypeData.plan}
                icon={'icon-change_one'}
                disableIcon={'icon-change_one_grey'}
                linkTo={() => navigate('/interchangeablePlan?stuCouId=' + stuCouId)}
              ></CourseTypeItem>
            </div>
          </div>
          <div className="mt-r2.4 text-gray-333333 px-r1.2">
            <h3 className="text-r1.3 flex leading-r1.3 font-medium-family pl-r0.4 mb-0">
              <p className="m-0">{couresTypeData.course.head}</p>
              <p className="m-0 ml-r1.6 text-r1.1 text-gray-999999 font-regular ">
                共{couresTypeData.course.totalTimes}次调课机会
                <span className="text-gray-333333 inline-block ml-r0.8">
                  {couresTypeData.course.remainingTimes}
                </span>
                /{couresTypeData.course.totalTimes}
              </p>
            </h3>
            {couresTypeData.course.adjustTime?.status == 0 ? (
              <EmptyChange
                style={{ marginTop: '4rem' }}
                content={[couresTypeData.course.adjustTime.msg]}
              />
            ) : (
              <div className="mt-r1.2 rounded-r0.8 overflow-hidden shadow-bs5">
                {adjustKeysName.map((res: string, index: number) => (
                  <div key={res}>
                    <CourseTypeItem
                      item={
                        couresTypeData.course[res as keyof typeof couresTypeData.course] as typeItem
                      }
                      icon={adjustKeys[res].key_icon}
                      disableIcon={adjustKeys[res].key_icon_disabled}
                      linkTo={() =>
                        navigate(
                          '/changeCourse?stuCouId=' +
                            stuCouId +
                            '&courseId=' +
                            couresTypeData.courseId +
                            '&adjustType=' +
                            res,
                        )
                      }
                    ></CourseTypeItem>
                    {index < adjustKeysName.length - 1 && (
                      <Divider
                        style={{
                          margin: '0',
                          padding: '0 1.2rem',
                          borderColor: '#F3F3F4',
                          backgroundColor: '#ffffff',
                        }}
                      />
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </>
      )}
      {errorStatus && <EmptyChange content={['']} />}
    </div>
  )
}

export default changeCourseType
